<template>
    <div class="center-panel">
      <h2>视频流</h2>
      <video ref="video" width="100%" height="auto" autoplay v-if="isCameraOpen"></video>
      <p v-else>摄像头未打开</p>
    </div>
  </template>
  
  <script lang="ts">
  import { ref, watch, onUnmounted } from 'vue';
  
  export default {
    name: 'CenterPanel',
    props: {
      isCameraOpen: {
        type: Boolean,
        required: true,
      },
      stream: {
        type: Object as () => MediaStream | null,
        required: false,
      },
    },
    setup(props) {
      const video = ref<HTMLVideoElement | null>(null);
  
      watch(
        () => props.stream,
        (newStream) => {
          if (video.value) {
            if (newStream) {
              video.value.srcObject = newStream; // 设置视频源
              video.value.play(); // 播放视频
            } else {
              video.value.srcObject = null; // 清理视频源
            }
          }
        },
        { immediate: true }
      );
  
      onUnmounted(() => {
        if (video.value) {
          video.value.srcObject = null; // 清理视频源
        }
      });
  
      return {
        video,
      };
    },
  };
  </script>
  
  <style>
  .center-panel {
    border: 1px solid #ccc;
    padding: 10px;
  }
  </style>
  